<template>
  <div class="wrap_swiper">
    <div class="swiperTextBox">
      <div class="title_text">
        <h1>这是一个摄影网站</h1>
        <p class="text_p">
          <span class="text_icon">Happy Photos for you</span>
          <svg class="button_icon" aria-hidden="true">
            <use xlink:href="#icon-kaixin"></use>
          </svg>
        </p>
      </div>
      <div class="search swiper_search">
        <button class="head_search_button">
          <svg class="button_icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo2"></use>
          </svg>
        </button>
        <input
          class="head_search_input"
          type="text"
          v-model="searchValue"
          placeholder="search for something you need"
        >
      </div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" v-if="swiperURL.length">
      <swiper-slide v-for="indexImg of swiperURL" :key="indexImg.id">
        <img :class="imgBox" :src="indexImg.imgUrl" alt>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import Swiper from "swiper";
import "@/assets/style/swiper.css";
export default {
  name: "SwiperIndex",
  props: {
    swiperURL: Array,
    imgbox: String,
    showModal: Boolean
  },
  data() {
    return {
      searchValue: "",
      imgBox: this.imgbox,
      screenWidth: document.body.clientWidth,
      swiperOption: {
        autoplay: false,
        loop: false,
        autoplay: {
          disableOnInteraction: false
        },
        // effect:"coverflow",
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  watch: {
    imgbox: function(newValue, oldValue) {
      this.imgBox = newValue;
    }
  }
};
</script>

<style scope>
.wrap_swiper {
  position: relative;
}
.swiperTextBox {
  position: absolute;
  width: 800px;
  height: 200px;
  /* background-color: rgba(93, 176, 195, 0.3); */
  z-index: 2;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.swiper-container {
  overflow: hidden;
}
input::-webkit-input-placeholder {
  color: #000;
}
.imgBox {
  width: 2100px;
  height: 635px;
}
.imgBox1 {
  width: 1700px;
  height: 635px;
}
.imgBox2 {
  width: 1500px;
  height: 635px;
}
.imgBox3 {
  width: 1200px;
  height: 635px;
}
.head_search_button {
  border-radius: 5px 0 0 5px;
  height: 60px;
  background-color: rgba(250, 250, 250, 0.7);
}
.head_search_input {
  width: 90%;
  height: 60px;
  border-radius: 0 5px 5px 0;
  background-color: rgba(250, 250, 250, 0.7);
}
.title_text {
  color: white;
}
.swiper_search {
  margin: 20px 0 0 30px;
}
.button_icon {
  width: 25px;
  height: 25px;
}
.text_p {
  display: flex;
  margin-top: 15px;
  font-size: 16px;
}
.text_icon {
  display: flex;
  align-items: center;
}
.title_text {
  margin: 25px 0 0 32px;
}
</style>
